<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

.order-list-scroll{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  padding: 20px 30px;
  border-top: 20px solid #ddd;
  box-sizing: border-box;
}
.order-list{
  li{
    padding: 20px;
    border-bottom: 1PX solid #ddd;

    .each-tab{
      color: #000;
      .px2px(font-size, 28PX);
      .flex-row-between;

      .pay-time{
        color: #ccc;
        .px2px(font-size, 26PX);
      }
    }
  }
}
</style>
<template>
  <div class="container">
    <mescroll-vue class="order-list-scroll" :down="orderScrollDown" :up="orderScrollUp" @init="orderScrollInit">
      <ul class="order-list">
         <template v-for="(item, index) of orderLst">
          <li :key="index" @click="goDetail(item.no)">
              <div class="each-tab">
                  <p class="pay-type">{{item.merchantName}}</p>
                  <p class="pay-num">{{item.amount.amount}}</p>
              </div>
              <div class="each-tab">
                  <p class="pay-time">{{item.ymd}}</p>
                  <p class="pay-num">{{item.payType | checkType}}-{{item.orderState | checkPayStatus}}</p>
              </div>
          </li>
        </template>
      </ul>
    </mescroll-vue>
  </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  components: {
    MescrollVue
  },
  data() {
    return {
      reqData: {},  // 请求数据
      orderScroll: {},    // 滚动组件对象
      orderScrollUp: {
        callback: () => { this.reqTalkLst(1) },
        auto: false
      },
      orderScrollDown: {
        callback: () => { this.reqTalkLst(0) },
        auto: false
      },
      orderLst: []      // 订单列表
    }
  },
  async mounted() {
    // let res = await this.request('orderLst')
    // this.$store.commit('updateLoadingStatus', false)
    // this.orderLst = res.data.list
    this.reqTalkLst(0)
  },
  methods: {
    goDetail(no) { // 跳转详情
      this.$router.push({name: 'orderDetail', query: {no: no}})
    },
    orderScrollInit(mescroll) {      // taklScroll组件初始化回调
      this.orderScroll = mescroll
    },
    async reqTalkLst(type) {          // 请求对话列表     0 初始化  1 下一页
      if (type === 0) {
        this.reqData.page = 1
      } else {
        this.reqData.page += 1
      }
      let res = await this.request('orderLst', this.reqData)
      this.$store.commit('updateLoadingStatus', false)
      this.hasNext = res.data.hasNextPage
      if (!this.hasNext) {
        this.orderScroll.endSuccess(res.data.list.length, false)
            // this.talkScroll.showNoMore()     // 展示END
      } else {
        this.orderScroll.endSuccess(res.data.list.length, true)
      }
      if (type === 0) {
        this.orderLst = res.data.list
      } else {
        this.orderLst = this.orderLst.concat(res.data.list)
      }
    }
  }
}
</script>
